<template>
    <div class='content'>
        <div class="background">
            <div class="top"> 
                <div>
                    <div style="font-size: 20px;font-weight: 900;">限时最高 ¥100</div>
                    <div style="color: rgb(159, 162, 163);font-size: 14px;margin-top: 20px;display: flex;">
                        <div>
                            当前已获得
                        </div>
                        <div style="margin-left: 3px;" @click="isShowRule = true">
                            <van-image width="25" height="25" :src="require('../../assets/img/popRlue.jpg')"/>

                        </div>
                    </div>
                    <div style="color: rgb(159, 162, 163);font-size: 14px;">0/100</div>
                </div>
                <div>
                    <van-image width="100" height="150" :src="require('../../assets/img/giftIcon.jpg')"/>
                </div>
            </div>
            <van-action-sheet v-model="isShowRule" title="奖励说明">
                <div class="infoSheet">
                    <div>卡券礼包</div>
                    <div style="font-size: 16px;color: #c4b9b9;">通过完成对应任务可获得任务奖励礼包！任务奖励包含：100元现金抵扣券，最高50元实物商品折扣券。</div>
                </div>
            </van-action-sheet>

            <van-overlay :show="isShowGift" @click="isShowGift = false">
                <div class="wrapper" @click.stop>
                    <van-image width="300" height="600" :src="require('../../assets/img/giftaward.png')"/>
                    <div style="margin-top: 20px;" @click="isShowGift = false">
                        <van-image width="50" height="50" :src="require('../../assets/img/close.jpg')"/>
                    </div>
                </div>
                
            </van-overlay>

            <div class="middle" v-if="!isShowSecondDay">
                <div class="one">1</div>
                <div style="margin: 10px 30px 10px 5px;"> 
                    <div class="title">完成营养师身份认证 </div>
                    <div class="desc">
                        现在完成即可开放服务平台权限，解锁最高¥100新人奖励服务
                    </div>

                    <div class="middleInfo" v-if="tab == 1">
                        <div style="color:red;margin:5px 0px 5px 5px;font-size: 18px;" v-if="isShowError">填写信息有误，请重新填写</div>
                        <div>姓名</div>
                        <div style="margin-right: 50px; margin-top: 5px;">
                            <van-field v-model="formData.real_name" placeholder="请输入申请人姓名" />
                        </div>
                        <br>
                        <div>性别</div>
                        <div style="margin-top: 5px;">
                            <van-radio-group v-model="formData.gender"  direction="horizontal">
                                <van-radio name="1" checked-color="#78dcba">男</van-radio>
                                <van-radio name="2" checked-color="#78dcba">女</van-radio>
                            </van-radio-group>
                        </div>
                        <br>
                        <div>上传个人简历 <span syle="color: #c4b9b9">(非必填)</span></div>
                        <div style="margin-top: 5px;">
                            <van-uploader v-model="fileList" :max-count="8" :after-read="afterReadJL" :before-delete="_deleImgJL"/>
                        </div>
                        <br>
                        <div>类型</div>
                        <div>
                            <div style="margin-top: 5px;">
                                <van-radio-group v-model="formData.identity_type"  direction="horizontal">
                                    <van-radio name="1" checked-color="#78dcba">个人</van-radio>
                                    <van-radio name="2" checked-color="#78dcba">机构</van-radio>
                                </van-radio-group>
                            </div>


                            <div v-if="formData.identity_type == 1" style="margin-top: 10px;margin-left: 20px;">
                                <div style="margin-top: 15px;">资质证书</div>
                                <div style="margin-top: 5px;">
                                    <van-uploader :after-read="afterReadZS" v-model="certificate" :max-count="3" :before-delete="_deleImgZS">
                                        <van-image width="100" height="100" :src="require('../../assets/img/card.jpg')"/>
                                        <div style="color: #beb9b9;margin-top: 5px;">资质证书信息面</div>
                                    </van-uploader>
                                </div>

                                <div style="margin-top: 15px;">上传身份证</div>
                                <div style="margin-top: 5px;">
                                    <van-uploader style="margin-right: 10px;" v-model="formData.id_card_frontArr" :after-read="afterReadIcard1" :before-delete="_deleImgIcard1" :max-count="1">
                                        <van-image width="100" height="65" :src="require('../../assets/img/icard1.jpg')"/>
                                        <div style="color: rgb(190, 185, 185);margin-top: 5px;">身份证头像面
                                        </div>
                                    </van-uploader>
                                    <van-uploader v-model="formData.id_card_backArr" :before-delete="_deleImgIcard2" :after-read="afterReadIcard2" :max-count="1">
                                        <van-image width="100" height="65" :src="require('../../assets/img/icard2.jpg')"/>
                                        <div style="color: rgb(190, 185, 185);margin-top: 5px;">身份证国徽面
                                        </div>
                                    </van-uploader>
                                </div>
                                
                            </div>

                            <div v-if="formData.identity_type == 2" style="margin-top: 10px;margin-left: 20px;">
                                <div>机构名称</div>
                                <div style="margin-top: 5px;margin-right: 50px;">
                                    <van-field v-model="formData.ori_name" placeholder="请输入公司名称" />
                                </div>
                                <div style="margin-top: 15px;">营业执照</div>
                                <div style="margin-top: 5px;">
                                    <van-uploader :after-read="afterReadZZ" v-model="license" :before-delete="_deleImgZZ" :max-count="1">
                                        <van-image width="200" height="140" :src="require('../../assets/img/business.jpg')"/>
                                        <div style="color: #beb9b9;margin-top: 5px;">营业执照信息面</div>
                                    </van-uploader>
                                </div>
                            </div>
                            
                        </div>
                    </div>

                    <div style="display: flex;margin-top: 8px;" v-if="tab ==1">
                        <div>
                            <van-checkbox v-model="isAree" checked-color="#78dcba"></van-checkbox>
                        </div>
                        <div style="margin-left: 10px;color: #beb9b9;font-size: 12px;align-self: center;">入驻钱请阅读《米洛健康服务商服务协议》</div>
                    </div>
                    <div v-if="tab ==1">
                        <van-button color="#78dcba" type="info" style="width: 100%;margin-top: 10px;" @click="submit">提交</van-button>
                    </div>

                    <div class="stating" v-if="tab ==2">

                        <div style="text-align: center;">
                            <van-image width="70" height="70" :src="require('../../assets/img/ddd.gif')"/>
                        </div>
                        <div style="text-align: center;margin-top: 10px;font-size: 18px;color:#beb9b9;">
                            已完成提交，认证信息审核中～
                        </div>

                    </div>

                    <div class="stating" v-if="tab ==3">

                        <div style="text-align: center;">
                            <van-image width="150" height="100" :src="require('../../assets/img/threeCard.jpg')"/>
                        </div>
                        <div style="text-align: center;font-size: 18px;color:#a6a5a5;">
                            恭喜您 <br>
                            资质审核已通过<br>
                            <div style="color:#6552f6;font-size: 16px;" @click="getReward">领取奖励</div>
                        </div>

                    </div>

                </div>
            </div>
            <div v-if="!isShowSecondDay">
                <div class="bottom">
                    <div class="one two">2</div>
                    <div class="invitation">完成邀请客户
                        <div style="font-size: 14px;color: #beb9b9;">
                            你有一份奖励待领取
                        </div>
                        <div class="process" v-if="tab ==3">
                            <div style="padding: 0px 30px 0 0 ">
                                <div style="background-color: #ece8e8;width: 100%;">
                                    <div class="progress-bar" :style="{width: this.progress + '%'}"></div>    
                                </div>
                                <div style="display: flex; margin-top: -27px;">
                                    <div style="margin-left:33%" @click="giftShow(1)">
                                        <div>
                                            <van-image width="57" height="48" :src="gitIconPath1"/>
                                        </div>
                                       
                                    </div>
                                    <div style="margin-left:30%" @click="giftShow(2)">
                                        <van-image width="57" height="48" :src="gitIconPath2"/>
                                        
                                    </div>
                                </div>
                                <div style="display: flex;font-size: 15px;">
                                    <div style="text-align: center;margin-left: 27%;white-space: nowrap;font-size: 12px;">
                                        <div>50位</div>
                                        <div>潜在客户触达</div>
                                    </div>
                                    <div style="text-align: center;margin-left: 21%;;white-space: nowrap;font-size: 12px;">
                                        <div style="margin-left: 10px;">100位</div>
                                        <div style="margin-left: 10px">潜在客户触达</div>
                                    </div>

                                    
                                </div>
                                
                            </div>
                            <div style="font-size: 14px;color: #beb9b9;margin-top: 20px;">
                                邀请好友参与问卷评估，寻找潜在客户群，完成任务获得额外奖励
                            </div>    
                        </div>
                        
                        <div v-if="tab ==3">
                            <van-button color="#78dcba" type="info" style="width: 100%;margin-top: 30px;" @click="copy">立即邀请</van-button>
                        </div>

                    </div>
                </div>
                
            </div>

            <div class="secondDay" v-if="isShowSecondDay">
                <div class="dayTitle">每日邀请任务
                    <div style="font-size: 14px;color: #beb9b9;">
                        你有一份奖励待领取
                    </div>
                    <div class="process">
                            <div style="padding: 0px 30px 0 0 ">
                                <div style="background-color: #ece8e8;width: 100%;">
                                    <div class="progress-bar" :style="{width: this.progress + '%'}"></div>    
                                </div>
                                <div style="display: flex; margin-top: -27px;">
                                    <div style="margin-left:33%" @click="giftShow(1)">
                                        <div>
                                            <van-image width="57" height="48" :src="gitIconPath1"/>
                                        </div>
                                       
                                    </div>
                                    <div style="margin-left:30%" @click="giftShow(2)">
                                        <van-image width="57" height="48" :src="gitIconPath2"/>
                                        
                                    </div>
                                </div>
                                <div style="display: flex;font-size: 15px;">
                                    <div style="text-align: center;margin-left: 27%;white-space: nowrap;font-size: 12px;">
                                        <div>50位</div>
                                        <div>潜在客户触达</div>
                                    </div>
                                    <div style="text-align: center;margin-left: 21%;;white-space: nowrap;font-size: 12px;">
                                        <div style="margin-left: 10px;">100位</div>
                                        <div style="margin-left: 10px">潜在客户触达</div>
                                    </div>

                                    
                                </div>
                                
                            </div>
                            
                        </div>
                        <div style="font-size: 14px;color: #beb9b9;">
                            邀请好友参与问卷评估，寻找潜在客户群，完成任务获得额外奖励
                        </div>
                        <div>
                            <van-button color="#78dcba" type="info" style="width: 100%;margin-top: 30px;" @click="copy">立即邀请</van-button>
                        </div>

                </div>
            </div>
            <div class="question" v-if="isShowSecondDay">
                <div style="font-size: 18px;font-weight: 700;">常见问题</div>
                <div style="margin-top: 10px;font-weight: 700;">
                    ①服务佣金如何计算？<br>
                    <span style="display: block;margin-top: 8px;">系统根据服务人员等级，在月底按照服务订单和销售订单进行核算，服务人员在后台端可以看到自己的待结算佣金金额;</span>
                </div>

                <div style="margin-top: 25px;font-weight: 700;">
                    <div>②如何实现等级晋升？</div>
                    <div>
                        <van-image width="100%" height="340px" :src="require('../../assets/img/promoteIcon.jpg')"/>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            gitIconPath1:'../../assets/img/box.jpg',
            gitIconPath2:'../../assets/img/gray.jpg',
            isShowRule:false,
            isShowGift:false,
            tab:1,
            progress:20,
            formData: {
                business_license:[],//营业执照
                gender:'',//性别
                id_card_back:'',//身份证背面
                id_card_backArr:[],//身份证背面

                id_card_front:'',//身份证正面
            },
            isShowError:false,
            isShowSecondDay:false,
            isShowRule:false,
            isShowGift:false,
            tab:1,
            progress:20,
            formData: {
                business_license:[],//营业执照
                gender:'',//性别
                id_card_back:'',//身份证背面
                id_card_backArr:[],//身份证背面

                id_card_front:'',//身份证正面
                id_card_frontArr:[],//身份证正面

                identity_type:'',//类型
                ori_name:'',//机构名称

                qualification_certificate:[],//资质证明
                real_name:'',//姓名
                resume:[],//简历
            },
            isAree:false,
            fileList:[],//上传个简历
            certificate:[],//资质证书
            license:[],//营业执照

            files: {
                name: "",
                type: ""
            },
            imgList:[],
        }
    },
    methods: {
        _deleImgJL(file,name) {
            //标识, 使用的商品的索引
            let sub = name.index;
            //qualification_certificate
            this.formData.resume.splice(sub, 1);
            //certificate是展示预览的图片数组
            this.fileList.splice(sub, 1);

        },
        
        _deleImgZS(file,name) {

            //标识, 使用的商品的索引
            let sub = name.index;
            //qualification_certificate
            this.formData.qualification_certificate.splice(sub, 1);
            //certificate是展示预览的图片数组
            this.certificate.splice(sub, 1);
        },
        _deleImgIcard1(file,name) {
            //标识, 使用的商品的索引
            let sub = name.index;
            //qualification_certificate
            this.formData.id_card_front = '';
            //certificate是展示预览的图片数组
            this.id_card_frontArr.splice(sub, 1);
        },
        _deleImgIcard2(file,name) {
            //标识, 使用的商品的索引
            let sub = name.index;
            //qualification_certificate
            this.formData.id_card_back = '';
            //certificate是展示预览的图片数组
            this.id_card_backArr.splice(sub, 1);
        },
        _deleImgZZ(file,name) {
            //标识, 使用的商品的索引
            let sub = name.index;
            //qualification_certificate
            this.formData.business_license.splice(sub, 1);
            //certificate是展示预览的图片数组
            this.license.splice(sub, 1);

        },
        userInfo() {
            this.$http.get(this.$api.userInfo).then(res => {
                if (res.code == 200) {
                    this.profile_id = res.data.profile_id
                }
            })
        },
        inviteFinishCount() {
            this.$http.get(this.$api.inviteFinishCount).then(res => {
                if(res.code == 200) {
                    this.progress = (res.data.finish_count / 100) *100
                    if (this.progress < 50) {
                        this.gitIconPath1 = require('../../assets/img/gray.jpg')
                        this.gitIconPath2 = require('../../assets/img/gray.jpg')
                    } else if ( this.progress >= 50 && this.progress < 100) {
                        this.gitIconPath1 = require('../../assets/img/box.jpg')
                        this.gitIconPath2 = require('../../assets/img/gray.jpg')
                    } else if ( this.progress >= 100) {
                        this.gitIconPath1 = require('../../assets/img/box.jpg')
                        this.gitIconPath2 = require('../../assets/img/box.jpg')
                    }
                }
            })
        },
        getReward() {
            this.isShowGift = true;
        },
        copy() {
            if (this.profile_id == 0) {
                this.$toast('请先申请营养师');
                return
            }
                    // 创建一个隐藏的textarea元素
            var textarea = document.createElement('textarea');
            document.body.appendChild(textarea);
            
            let url = 'https://healthc.mirror-networks.com/qa/index.html#/qa/wj_46909041/1'+'?profile_id='+this.profile_id +'&inviteType=10010'
            
            // 设置需要复制的文本为Vue的内容
            textarea.value = url;
            
            // 选中并复制文本
            textarea.select();
            document.execCommand('copy');
            
            // 移除临时的textarea元素
            document.body.removeChild(textarea);
            this.$toast('已复制到剪切板');
        },  
        hmReviewStatus() {
            this.$http.get(this.$api.hmReviewStatus).then(res => {
                if(res.code == 200) {
                    this.isShowSecondDay = res.data.pass_more_than_one_day
                    if (res.data.review_status == 3 || res.data.review_status == 2) {
                        this.tab = 1 
                        this.isShowError = res.data.review_status == 2 ? true:false;
                    } else if (res.data.review_status == 0) {
                        this.tab = 2
                    } else if(res.data.review_status == 1){
                        this.tab = 3
                    };

                }
            })
        },  
        giftShow(val) {
            if (this.progress >= 50 && val) {
                this.isShowGift = true;
                
            } else if (this.progress < 50) {
                this.isShowGift = false;
            }
            
            
        },
        startAnimation() {
            this.animateProgress();
        },
        animateProgress() {
            let interval = setInterval(() => {
                if (this.progress >= 100) {
                    clearInterval(interval);
                } else {
                    this.progress += 5; // 每次增加5%
                }
            }, 300); // 定义每次更新的间隔时间
        },
        afterReadJL(file) { //简历
            this._commonRead(file,'JL')
        },
        afterReadZS(file) { //资质证书
            
            this._commonRead(file,'ZS')
            
        },
        afterReadIcard1(file) {//身份证正
            
            
            this._commonRead(file,'icard1')
            
        },
        afterReadIcard2(file) {//身份证反
            
            this._commonRead(file,'icard2')
            
        },
        afterReadZZ(file) {//营业执照
            
            this._commonRead(file,'ZZ')
            
        },

        _commonRead(file,type) {
            console.log('file',file);
            this.file = file;
            this.file.status = 'uploading';
            this.file.message = '上传中...';
            this.files.name = file.file.name // 获取文件名
            this.files.type = file.file.type // 获取类型
            this.imgPreview(file.file,this.imgList.length,type)
        },
        imgPreview(file,index,value) {
            let self = this
            // 看支持不支持FileReader
            if (!file || !window.FileReader) return
            
            if (/^image/.test(file.type)) {
                // 创建一个reader
                let reader = new FileReader()
                // 将图片2将转成 base64 格式
                reader.readAsDataURL(file)
                // 读取成功后的回调
                reader.onloadend = function() {
                    console.log(' this.result', this.result);
                    let result = this.result
                    let img = new Image()
                    img.src = result
                    //判断图片是否大于1MB,是就直接上传，反之压缩图片
                    if (this.result.length <= 1000 * 1024) {
                        // 上传图片
                        self.uploadPicture(this.result,index,value);
                    }else {
                        img.onload = function() {
                            let data = self.compress(img)
                            // 上传图片
                            self.uploadPicture(data,index,value);
                        }
                    }
                }
            }
        },
        compress(img) {
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
            //瓦片canvas
            let tCanvas = document.createElement('canvas')
            let tctx = tCanvas.getContext('2d')
            // let initSize = img.src.length;
            let width = img.width
            let height = img.height
            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            let ratio
            if ((ratio = (width * height) / 4000000) > 1) {
                // console.log("大于400万像素");
                ratio = Math.sqrt(ratio)
                width /= ratio
                height /= ratio
            } else {
                ratio = 1
            }
            canvas.width = width
            canvas.height = height
            //    铺底色
            ctx.fillStyle = '#fff'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            //如果图片像素大于100万则使用瓦片绘制
            let count
            if ((count = (width * height) / 1000000) > 1) {
                // console.log("超过100W像素");
                count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
                //      计算每块瓦片的宽和高
                let nw = ~~(width / count)
                let nh = ~~(height / count)
                tCanvas.width = nw
                tCanvas.height = nh
                for (let i = 0; i < count; i++) {
                for (let j = 0; j < count; j++) {
                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
                }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height)
            }
            
            //进行最小压缩
            let ndata = canvas.toDataURL('image/jpeg', 0.5)
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            // console.log(ndata)
            return ndata
        },
        dataURLtoFile(dataurl) {
            var arr = dataurl.split(','),
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], this.files.name, {
                type: this.files.type
            })
        },
        uploadPicture(base64,index,value) {

            let file = this.dataURLtoFile(base64)

            let params = new FormData()
            params.append('file', file)
            
            this.$http.post(this.$api.upload, params).then(res =>{
                if(res.code == 200){
                    this.file.status = '';
                    if(value == 'JL'){
                        this.formData.resume.push(res.data);
                    } else if(value == 'ZS'){
                        this.formData.qualification_certificate.push(res.data);
                    } else if(value == 'icard1'){
                        this.formData.id_card_front = res.data;
                    } else if(value == 'icard2'){
                        this.formData.id_card_back = res.data;
                    } else if(value == 'ZZ'){
                        this.formData.business_license = [res.data];
                    }
                }else{
                    this.file.status = 'failed';
                    this.file.message = '上传失败';
                    console.warn('--上传出错--', '第'+(index+1)+'张');
                }
            }).catch(error =>{
                console.log(error);
            })
        },
        submit() {
            
            this.$http.post(this.$api.reviewSubmit,this.formData).then(res => {
                if(res.code == 200){
                    this.$toast({
                        message: '提交成功',
                        duration: 1500
                    });
                    this.hmReviewStatus();
                } else {
                    this.$toast({
                        message: res.message,
                        duration: 1500
                    });
                }
            })
        }

    },
    created() {
        this.hmReviewStatus();
        this.inviteFinishCount();
        this.userInfo();
    },
}
</script>

<style lang="scss" scoped>
.content {
    .van-action-sheet__header {
        text-align: left;
        font-size: 18px;
        font-weight: 900;
        margin: 5px 20px;
    }
    width: 100%;
    min-height: 100vh;
    font-family: PingFangSC-Regular, PingFang SC;
    background: white;
    .background {
        .infoSheet {
            padding: 16px 20px 160px 50px;
            font-size: 18px;
            font-weight: 900;
        }
        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .block {
            width: 120px;
            height: 120px;
            background-color: #fff;
        }
        min-height: 100vh;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background: url('../../assets/img/backgroundEnter.png') no-repeat center;
        background-size: cover;
        .top {
            display: flex;
            justify-content: space-between;
            margin:30px 20px;
            margin-bottom: 0px;
        }
        .one {
                flex-shrink: 0;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background: #78dcba;
                color: white;
                border-radius: 13px;
                text-align: center;
                margin: 10px 0px 0 8px;
                font-weight: 900;   
            }
            .two {
                margin-left: 20px;
                margin-top: 2px;
                
            }

        .middle {
            margin: 20px 17px;
            border-style: solid;
            border-width: 2px;
            
            border-radius: 10px;
            background: white;
            border-color: #78dcba;
            display: flex;
            
            
            .title {
                font-size: 18px;
                font-weight: 900;
                
            }
            .desc {
                color: rgb(159, 162, 163);
                font-size: 13px;
                font-weight:500;   
            }
            .stating {
                margin-top: 15px;
                border-radius: 10px;
                padding-bottom: 20px;
                background: rgb(228, 250, 243);
                padding-top: 13px;
                padding-left: 15px;
            }
            .middleInfo {
                margin-top: 15px;
                border-radius: 10px;
                padding-bottom: 20px;
                background: rgb(228, 250, 243);
                padding-top: 13px;
                padding-left: 15px;
            }   
        }
        .question {
            margin: 20px 17px;
            padding: 20px;  

        }
        .secondDay {
            margin: 20px 17px;
            
            height: 300px;
            border-radius: 10px;
            background: white;
            border-color: #78dcba;
            padding: 20px;
            .dayTitle {
                font-size: 18px;
                font-weight: 900;
                vertical-align: middle;
            }
            
        }
        .bottom {
            display: flex;
            margin-bottom: 90px;
            .invitation {
                font-size: 18px;
                font-weight: 900;
                vertical-align: middle;
                margin-left: 5px;
            }
            
        }
        .process {
                margin-top: 15px;
                border-radius: 10px;
                background: rgb(255, 255, 255);
                
                padding: 15px;
                
                width: 263px;
                .progress-bar {
                    margin-top: 24px;
                    border-radius: 2px;
                    height: 4px;
                    background-color: rgb(110, 188, 175);
                    transition: width 0.5s ease; /* 设置过渡效果 */
                }
            
            }
    }
}
    
</style>